import Vue from 'vue'
// 导入 vuex 包
import Vuex from 'vuex'

// 通过use将Vuex安装到项目中
Vue.use(Vuex)

// 创建一个 vuex对象，通过 export 将这个对象暴露出去
export default new Vuex.Store({
  // 定义全局共享的数据
  state: {
    count: 0
  },
  // 定义 mutation
  // store 中的数据更新使用 mutation,不能使用 $store 进行修改
  // 通过 mutation  跟新数据,可以更好的进行监控
  // mutation 中不能进行异步操作
  mutations: {
    add(state) {
      state.count++
    },
    addN(state, step) {
      state.count += step
    },
    sub(state) {
      state.count--
    },
    subN(state, step) {
      state.count -= 5
    }
  },
  // action 用于处理异步任务
  // 如果数据通过异步更新,则需要使用 action,在 action 中触发 mutation 函数进行数据变更
  actions: {
    addAsync(context) {
      setTimeout(() => {
        context.commit('add')
      }, 1000)
    },
    addNAsync(context, step) {
      setTimeout(() => {
        context.commit('addN', step)
      }, 1000)
    }
  },
  // getter 可以对 state 中的数据进行包装
  getters: {
    showNum: state => {
      return '当前最新的计算值是【' + state.count + '】'
    }
  },
  modules: {}
})
